<template>
  <main>
    <h2>我是首页(测试导航守卫)</h2>
    <!-- router-link: 路由入口组件，它最终在页面上是a标签，但是它不会重新访问站点 -->
    <ul>
      <li>
        <router-link to="/hello-state"
          ><h3>状态引入（传统方式）</h3></router-link
        >
      </li>
      <li>
        <router-link to="/hello-vuex"><h3>hello-vuex</h3></router-link>
      </li>
      <li>
        <router-link to="/map-mutations"><h3>map-mutations</h3></router-link>
      </li>
      <li>
        <router-link to="/hello-getters"><h3>hello-getters</h3></router-link>
      </li>
      <li>
        <router-link to="/map-getters"><h3>map-getters</h3></router-link>
      </li>
      <li>
        <router-link to="/hello-actions"><h3>hello-actions</h3></router-link>
      </li>
       <li>
        <router-link to="/map-actions"><h3>map-actions</h3></router-link>
      </li>
    </ul>
    <hr />
    <!-- 路由出口，用于展示路由出来的组件 -->
    <h2>路由出口</h2>
    <router-view v-slot="{ Component }">
      <keep-alive>
        <component :is="Component" />
      </keep-alive>
    </router-view>
  </main>
</template>
  
  <script>
export default {
  name: "App",
  data() {
    return {};
  },
};
</script>
  
  <style>
* {
  padding: 0px;
  margin: 0px;
  list-style: none;
  text-decoration: none;
  box-sizing: border-box;
}
</style>
